<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .container{
    display:flex;
  }
  .box1{
    width: 50%;
  }
  .box2{
    background: pink;
    color:white;
    font-size: 8em;
  }
</style>
<body>
<h1>注册</h1>

  <div class="container">
    <div class="box1">
      <label><input type="checkbox" id="legal">我已阅读相关说明并遵守相关法律</label>
<form id="register">
  <div>
    用户名:
    <input type="text" name="username">
    <br> 未来意向：
    <label><input type="radio" name="purp" value="1">Java工程师</label>
    <label><input type="radio" name="purp" value="2">测试工程师</label>
    <label><input type="radio" name="purp" value="3">前端工程师</label>
    <!-- 添加隐藏域 -->
    <input type="hidden" name="purpose">
    <br>
    <br> 请从以下课程中选择2项最喜欢的课程
    <ul>
      <li>
        <label>
          <input type="checkbox" name="courses">Web开发技术
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="courses">软件项目管理
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="courses">数据库原理
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="courses">系统分析与设计
        </label>
      </li>
    </ul>
    地址：
    <ul id="ul_address">
    </ul>
    <input name="address">
    <button type="button" id="button_address">添加地址</button>
    <br>
  </div>
  <button type="submit">提交</button>
</form>
</div>

<div class="box2">
  这是实验四哦>~<
</div>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function(){
    let registerForm = $("#register :input").prop("disabled", true);
    let userNameValid = false;
    let coursersValid =false;
    $("#legal").click(function () {
      let dis = !$(this).prop("checked");
      registerForm.not($("button:submit")).prop("disabled", dis);
    });
    $("input[name=username]").change(function () {
      if($(this).val() .trim().length < 8){
        alert("用户名不能小于8位");
        userNameValid = false;
      }
      else{
        userNameValid = true;
      }
    });
    const checkbox = $("input[name=courses]");
    checkbox.click(function () {
      let checked = checkbox.filter(":checked");
      let unchecked = checkbox.not(":checked");
      coursersValid = checked.length >= 2;
      unchecked.prop("disabled",coursersValid);
    });
    $("input[name=username],input[name=courses]").change(function () {
      let dis = userNameValid && coursersValid;
      $("button:submit").prop("disabled",!dis);
    })

    $("#button_address").click(function () {
      let val = $("input[name=address]");
      $("#ul_address").append($(`<li>${val.val()}</li>`))
    })
    const radio = $("input[name=purp]");
    //双击取消选中
    /*radio.dblclick(function () {
      this.checked = false;
    })*/
    //单击取消选中
    radio.click(function () {
      if($(this).val() === $("input[name=purpose]").val()){
          $("input[name=purpose]").val(0);
          $(this).prop("checked",false);
        }else{
          $("input[name=purpose]").val($(this).val());
        }
    })
  })
</script>
</body>
</html>